<template>
    <div class="home">
      <div class="nav"><button @click="$router.back()"><i class="iconfont icon-left"></i></button>{{title}}</div>
      <div v-for="(item,index) in show_lists" :key="index">
        <div class="time">{{index}}</div>
        <div style="background: #fff;">
            <div class="bottom-menu" v-for="(itemTwo,index) in item" :key="index" @click="handleView(itemTwo.contractId)">
                <div class="bottom-menu-item">
                    <i class="iconfont icon-word yellow"></i>
                    <span class="ellipsis">{{itemTwo.contractTitle}}</span>
                    <i class="right cff6" v-if="itemTwo.contractStatus=='WAIT_USER_SIGN' || itemTwo.contractStatus=='WAIT_COMPANY_SIGN' || itemTwo.contractStatus=='SOURCE_COMPANY_SIGN'">待签署</i>
                    <i class="right cff6" v-if="itemTwo.contractStatus=='WAIT_LOCK' || itemTwo.contractStatus=='LOCK' || itemTwo.contractStatus=='FILE'">已完成</i>
                    <i class="right cff6" v-if="itemTwo.contractStatus=='SIGN_OVERDUE'">已失效</i>
                    <i class="iconfont icon-right_3 right"></i>
                </div>
                <div class="bottom-menu-item" style="justify-content: space-between;">
                    <div class="ellipsis" style="padding-left: 28px;">{{itemTwo.sendUserEnterpriseName}}</div>
                    <div class="ellipsis" style="padding-right: 10px;">{{itemTwo.sendTime}}</div>
                </div>
            </div>
        </div>
     </div>
    </div>
</template>
  
<script>
import { contractList } from "./../../api/index";
import { Toast , MessageBox } from 'mint-ui'
export default {
  name: 'contractlist',
  data () {
    return {
        show_lists : '',//显示的列表
        title:'',
    }
  },
  activated(){
    this.getContractList();
    if(this.$route.query.type==0){
        this.title = "需要我签署"
    }else{
        this.title = "签署完成"
    }
  },
  methods:{
    getContractList(){
        const queryParams = {
            type: this.$route.query.type,
            contractTitle:''
        };
        contractList(queryParams).then(response => {
            // let arr = [];
            // Object.keys(response.data).forEach((key,index)=>{
            //     arr.push(response.data[key]);
            // })
            // console.log(arr);
            this.show_lists = response.data ;
        }).catch(()=>{});
    },
    handleView(contractId){
        this.$router.push("/contractdetail?contractId=" + contractId);
    }
  }
}
</script>
  
<style lang="stylus" rel="stylesheet/stylus" scoped>
.home
    width 100%
    height 100%
    overflow hidden
    .time
        padding 15px 10px 10px
        font-weight bold
    .bottom-menu
        display flex
        flex-direction row
        justify-content space-between
        flex-wrap wrap
        /* padding-top 20px */
        border-bottom 1px solid #ddd
        padding-bottom 10px
        padding-top 15px
        margin-left 10px
        .bottom-menu-item
            width 100%
            display flex
            /* flex-direction column */
            align-items center
            padding 0 5px 10px 0
            .yellow
                color #0077ff
                font-size 24px
                padding-right 5px
                /* padding-bottom 5px */
            div
                font-size 14px
                color #999
            span
                font-weight normal
                font-size 16px
                color #333
                width 100%
            .right
                color #999
                font-size 20px
            .cff6
                color #ff6600
                font-size 14px
                width 20%
                text-align right
    :last-child
            border 0 none
</style>
  